{include file="public:head" /}
{include file="public:footer" /}
	<style>
		* { touch-action: pan-y; }
	</style>
<style>
* {
 margin:0;
 padding:0
}
html, body {
 height: 100%;
 width: 100%;
 font-size:12px;
}
.white_content {
 display: none;
 position: absolute;
 top: 25%;
 margin: 0 16vw;
 width: 60vw;
 padding: 6px 16px 20px 16px;
 border: 1px solid #D6E9F1;
 background-color: white;
 z-index:1002;
 overflow: auto;
 border-radius:6px;
}
.black_overlay {
 display: none;
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background-color:#f5f5f5;
 z-index:1001;
 -moz-opacity: 0.8;
 opacity:.80;
 filter: alpha(opacity=80);
}
.close {
 float:right;
 clear:both;
 width:100%;
 text-align:right;
 margin:0 0 6px 0
}
.close a {
 color:#333;
 text-decoration:none;
 font-size:14px;
 font-weight:700
}
.con {
 text-indent:1.5pc;
 line-height:21px
}
#light input{
	padding: 10px;
}
#light button{
	width: 50px;
	position: absolute;
	height: 40px;
}
#banner{
	position: fixed;
	background: #000;
	opacity: 0.5;
	display: none;
	width: 100%;height: 100vh;
	top: 0;
}
#parent .c-par{
	width: 100%;
	height: 50px;
	background: #ffffff;
	position: fixed;
	left:0;
	bottom:44px;
	padding: 3px;
}
#parent .c-give{
	font-size: 1.5rem;
	color: #ffffff;
	background:#f34c78;
	width: 50%;
	height: 100%;	
	text-align: center;
	left:25%;	
	border: none;
}
#parent .c img{
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
<div class="header">
	<div class="left"><a href="javascript:;" class="a-back"><span>返回</span></a></div>
	<div class="center">
		<h1>我的优惠券</h1>
	</div>
</div><!--//头部结束-->
<div class="coupon-content">
		<div class="coupon-list my-coupon">
			 <ul id="parent">
					<li>
						<div class="c">
							<img src="__STATIC__/images/coupon01.png"  class="Img" id="1" alt="">							
							<img src="__STATIC__/images/coupon01.png"  class="Img" id="2" alt="">																																				
							<img src="__STATIC__/images/coupon01.png"  class="Img" id="3" alt="">																																				
							<img src="__STATIC__/images/coupon01.png"  class="Img" id="4" alt="">																																				
						</div>	
						<div >		
							<div class="c-par">
								<button onclick="give()" class="c-give">赠送好友</button>
							</div>	 							
						</div>	
					</li>
			</ul>
		</div>
	<div  id="banner"onclick="hide('light')"></div>
	<div id="light" class="white_content">
		<div class="close"><a href="javascript:void(0)" onclick="hide('light')"> 关闭</a></div>
		<input  name="mobile" type="tel" id="phone" class="mui-input-clear mui-input" placeholder="请输入手机号" maxlength="11">
		<button onclick="togive()">赠送</button>
	</div>
</div>
</div>
</body>
<script src="__STATIC__/js/jquery-3.1.1.min.js"></script>
<script>		
	var light=document.getElementById('light');
	var div = document.getElementById("banner");
	function give(){
		div.style.display = 'block';
		light.style.display='block';
	}	
	var Img=document.getElementsByTagName("img");
	var arr=[];
		for(var i = 0;i<Img.length;i++){
			Img[i].addEventListener('click',function(){									
				if(this.className=='Img'){	
					this.className='imgs';		
					this.src='__STATIC__/images/coupon.jpg';
				}else{
					this.className='Img';
					this.src='__STATIC__/images/coupon01.png';
				}	
			});			
		}				
	function hide(tag){
		div.style.display = 'none';
		light.style.display='none';
	}
	function togive(){
		var phone = document.getElementById('phone').value;
		for(var k =0;k<$('.c .imgs').length;k++){
				arr.length == 0;
				if($('.imgs')){
					arr.push($('.imgs').eq(k).attr('id'));					
				}else{
					arr.length == 0;
				}
			}
			console.log(JSON.stringify(arr));	
		jQuery.ajax({
	        type : "post",
	        dataType : 'json',
	        data:{
	            id : JSON.stringify(arr),
	            phone : phone
	        },
	        url : "/myself/togive",
	        async : true,		
	        success:function(data){
	            console.log(data);
	            if (data == 'no') {
	            	alert('用户不存在');
					window.location.href='';
	            }else{
	            	alert('赠送成功');
	            	var light=document.getElementById('light');
					light.style.display='none';
					var parent = document.getElementById('parent');
					var child = document.getElementById(id);
					//console.log(child);
					parent.removeChild(child);
	            }
	        },
	        error:function(error){
	            //异常处理；
	            console.log(error);
	        }
	    });
	}
</script>
</html>
